<template>
  <div class="myhome">
    <div class="header">
      <div class="logo">
        <img src="../image/logo.png" alt />
      </div>
      <div class="tab">
        <div class="tab-item" @click="clickTab(1)">首页</div>
        <div class="tab-item" @click="clickTab(2)">物业动态</div>
        <div class="tab-item" @click="clickTab(3)">去缴费</div>
        <div class="tab-item" @click="clickTab(4)">信息修改</div>
      </div>
      <!-- <div class="searchBtn">
        <el-input v-model="search" size="big" placeholder="搜索相关房源" />
        <el-button
          size="small"
          icon="el-icon-search"
          style="height: 40px; display: flex; align-items: center"
        ></el-button>
      </div> -->
      <div class="userinfo">
        <div class="username">{{ this.username }}</div>
        <el-button
          :plain="true"
          style="border: none; width: 70px; height: 35px"
          @click="exit()"
          v-if="userinfo != null && userinfo.type != null"
          >退出</el-button
        >
      </div>
      <router-link
        :to="{ path: '/mylogin' }"
        class="gotologin"
        v-if="userinfo == null"
        >去登陆</router-link
      >
    </div>
    <!-- 首页 -->
    <div class="content">
      <el-carousel
        indicator-position="outside"
        height="500px"
        v-if="activeIndex == 1 || activeIndex == 2"
      >
        <el-carousel-item v-for="(item, index) in Imgitem" :key="index">
          <img :src="item" class="rightImg" />
        </el-carousel-item>
      </el-carousel>
      <div class="sights-photo" v-if="activeIndex == 1">
        <h1>小区风景 Residential landscape</h1>
        <h3>服务 —— 想客户所想，达客户所求，超客户所</h3>
        <div class="img-list">
          <img src="../image/sights.png" alt />
        </div>
      </div>
      <div class="footer" v-if="activeIndex == 1">
        <img src="../image/footer.png" alt />
      </div>
    </div>
    <!-- 物业公告 -->
    <div class="content" v-if="activeIndex == 2">
      <div style="display: flex; align-items: center ;justify-content: space-between; padding: 0 30px">
        <div style="width: 40%">
          <h3 style="font-size: 20px">物业公告</h3>
          <div class="test" style="padding-top: 12px" v-for="i in list" :key="i">
            <span>{{ i }}</span>
            <el-divider></el-divider>
          </div>
          <el-pagination
            @current-change="getPersonnelList"
            :current-page.sync="pageNo_personnel"
            :page-size="pageSize"
            background
            layout="prev, pager, next"
            :total="10"
          >
          </el-pagination>
        </div>

        <div style="width: 50%">
          <el-calendar v-model="value" />
        </div>
      </div>

      <div class="footer">
        <img src="../image/footer.png" alt />
      </div>
    </div>

    <!-- 自助缴费 -->
    <div
      class="content"
      style="width: 80%; margin: 80px auto"
      v-if="activeIndex == 3"
    >
      <el-button
        type="primary"
        icon="el-icon-plus"
        style="height: 40px; float: right"
        @click="openDialog()"
        >缴费</el-button
      >
      <el-table
        :data="list_charge"
        style="width: 100%; margin-top: 50px"
        stripe
        v-loading="loading"
      >
        <el-table-column label="业主" prop="houseUser"></el-table-column>
        <el-table-column label="缴费项	" prop="chargeType"></el-table-column>
        <el-table-column label="缴费人" prop="chargeUserName"></el-table-column>
        <el-table-column label="费用" prop="money"></el-table-column>
        <el-table-column label="缴费时间" prop="createTime"></el-table-column>
      </el-table>

      <el-pagination
        style="width: 8%; margin: 20px auto"
        @current-change="getChargeList"
        :current-page.sync="pageNo_charge"
        :page-size="pageSize"
        :total="total_charge"
        layout="total, prev, pager, next"
      ></el-pagination>

      <el-dialog :visible.sync="dialogVisible" width="50%" @close="clearComp()">
        <add-charge v-if="showComp" :clearComp="clearComp"></add-charge>
      </el-dialog>
    </div>
    <!-- 修改个人信息 -->
    <div class="content" v-if="activeIndex == 4">
      <update-user></update-user>
    </div>
  </div>
</template>

<script>
import p1 from "../image/1.jpg";
import p2 from "../image/2.jpg";
import p3 from "../image/3.jpg";
import cookie from "js-cookie";
import addCharge from "../components/addCharge.vue";
import updateUser from "../components/updateUser.vue";
import userRequest from "../request/user";
export default {
  data() {
    return {
      loading: false, //加载状态开关
      dialogVisible: false, //编辑框开关
      showComp: true, //子组件的开关
      activeIndex: "1", //菜单切换
      search: "",
      userinfo: null,
      username: "",
      userId: "",
      p1: p1,
      p2: p2,
      p3: p3,
      Imgitem: [p1, p2, p3], //轮播图列表
      pageSize: 5,

      list_charge: null,
      search_charge: null,
      pageNo_charge: 1,
      total_charge: null,
      chargeDetail: [],

      value: new Date(),
      list: [
        "测试111111",
        "测试222222",
        "测试333333",
        "测试444444",
        "测试555555",
        "测试666666",
        "测试777777",
      ],
    };
  },

  components: {
    addCharge,
    updateUser,
  },

  methods: {
    // 添加物业缴费
    openDialog() {
      this.dialogVisible = true;
      this.showComp = true;
    },

    // 关闭对话框
    clearComp() {
      this.showComp = false;
      this.dialogVisible = false;
      this.getChargeList();
    },

    // 点击切换菜单
    clickTab(index) {
      this.activeIndex = index;

      if (
        (index == 3 && this.userinfo == null) ||
        (index == 4 && this.userinfo == null)
      ) {
        this.$router.push({ path: "/mylogin" });
      }
      this.getChargeList();
    },

    // 退出登录
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.go();
      this.$message.success("注销成功!");
    },

    // 物业收费
    getChargeList(page = 1) {
      this.pageNo = page;
      userRequest
        .getChargeList({
          pageNo: this.pageNo_charge,
          pageSize: this.pageSize,
          id: this.userId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result;
            this.total_charge = result.total;
            this.list_charge = result.records;
            console.log(this.list_charge);
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },
  },

  created() {
    // 获取本地用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));

    if (this.userinfo != null) {
      if (this.userinfo.type == "admin") {
        this.$router.push({ path: "/adminhome" });
      }
      if (this.userinfo.type == "personnel") {
        this.$router.push({ path: "/userhome" });
      }
      console.log(this.userinfo);
      this.username = this.userinfo.userName;
      this.userId = this.userinfo.user.id;
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../css/myHome.scss";
</style>